import React from 'react';
import { Col, Row, Select } from 'antd';
import _ from 'lodash';
import ApprovalStatus from '@/components/ApprovalStatus';
import { router } from 'umi';
import moment from 'moment';
import MyBasicInfo from '@/components/MyBasicInfo';
import { EditPageRight } from './Operation';
import { showConfirm } from '@/utils/utils';
import { setReturnMoneyPlanVersionName } from '@/utils/versions_name';

export default function PageTopEdit(props) {
  const { level1, level2, project, stage, category, version, group } = props.match.params;
  const changeCurrentGroup = val => {
    showConfirm(
      () => {
        router.replace(
          `/OperatingPlan/ReturnMoneyPlan/${level1}/${level2}/${project}/${stage}/${category}/${version}/${val}/edit`,
        );
      },
      '切换组团不会自动保存当前编辑过后的数据',
      '请保存后再切换组团',
    );
  };

  /**
   * @Descripttion: 生成版本信息数据
   * @param {*} versionInfo 当前版本信息
   * @return {*} object
   */
  const setBasicInfoData = versionInfo => {
    const basicInfo = [
      {
        label: '版本名称',
        span: 2,
        value: setReturnMoneyPlanVersionName(versionInfo).currentVersionName,
      },
      {
        label: '创建人',
        value: versionInfo.createUser,
      },
      {
        label: '创建时间',
        value: moment(versionInfo.createTime).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        label: '创建方式',
        value: versionInfo.createMethodName,
      },
      {
        label: '更新时间',
        value: moment(versionInfo.updateTime || versionInfo.createTime).format(
          'YYYY-MM-DD HH:mm:ss',
        ),
      },
    ];
    const accessInfo = [
      {
        label: ['budget'].includes(versionInfo.versionType) ? '回款版本' : '签约版本',
        value: setReturnMoneyPlanVersionName(versionInfo).accessVersionName,
      },
    ];

    return {
      basicInfo,
      accessInfo,
    };
  };

  return (
    <Row
      type="flex"
      align="top"
      justify="space-between"
      style={{
        height: '36px',
        marginBottom: 5,
        borderBottom: '1px solid #e8e8e8',
      }}
    >
      <Col>
        <span>{setReturnMoneyPlanVersionName(props.currentVersion).currentVersionName}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <ApprovalStatus applyType={props.currentVersion.versionStateCode} />
        <MyBasicInfo data={setBasicInfoData(props.currentVersion)} />
        <Select
          size="small"
          style={{ width: '400px' }}
          placeholder="请选择"
          value={group}
          onChange={changeCurrentGroup}
        >
          {!_.isEmpty(props.groupsList) &&
            props.groupsList.map(item => (
              <Select.Option key={item.groupId} value={item.groupId}>
                {item.groupName}
              </Select.Option>
            ))}
        </Select>
      </Col>
      <Col>
        <EditPageRight {...props} isEdit={props.isEdit} handlerIsEdit={props.handlerIsEdit} />
      </Col>
    </Row>
  );
}
